<template>
	<view :style="{'background':ktheme == 'black' ? 'black':'white'}" style="min-height: 100vh">
		<hx-navbar :title="title"  :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
			<view :style="{ height: statusBarHeight}"></view>
			<view class="web-container">
				<web-view :src="url"></web-view>
			</view>
	</view>
</template>

<script>
	//获取系统状态栏高度
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight  + 'px';
	export default {
		data() {
			return {
				statusBarHeight: statusBarHeight,
				viewerUrl: '/hybrid/html/web/viewer.html', // 注意：静态的html文件需要放在根路径下的 hybrid/html 文件夹中
				fileUrl: "", // 要访问的本地pdf的路径
				url: '', // 最终显示在web-view中的路径
				// currentPage: 1, //初始页
				totalPage: 0, //总页码
				currentReadPage: 0, //当前页码
				title:''
			};
		},
	// 	onLoad(option) {
	// 		console.log('=>进入了PDF预览页面--')
	// 		console.log('获取的参数=>', option.id)
	// 		if (option.id != undefined && option.id != 'undefined' && option.id != '' && option.id != null) {
	// 		//	this.url = this.viewerUrl + '?file=' + encodeURIComponent(option.id);
				
				
				
	// 			//	this.fileUrl=option.id
	// 			// this.url = this.viewerUrl+'?file='+encodeURIComponent(this.fileUrl); // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
				
				
	// 			//可以
	// 			uni.downloadFile({
	// 				url: option.id,
	// 				success: res => {
	// 					console.log(res)
	// 					if (res.statusCode === 200) {
	// 						// ${ encodeURIComponent(page.fileUrl) }/
	// 						this.url = this.viewerUrl + '?file=' + encodeURIComponent(res.tempFilePath);
	// 					}
	// 				}
	// 			})
				
	// 			// window.open(option.id)
	// 			// let blob = new Blob([this.fileUrl], {
	// 			// 			type: 'application/pdf;charset=UTF-8'
	// 			// 		})
	// 			// 		this.fileUrl = window.URL.createObjectURL(blob) //创建预览路径

	// 			// this.url = this.viewerUrl+'?file='+ encodeURIComponent(this.fileUrl); // encodeURIComponent 函数可把字符串作为 URI 组件进行编码;
	// 			//        console.log("this.url--",this.url)
			
	// 			console.log('PDF预览成功=>')
	// 		} else { //无参就不预览PDF
	// 			uni.showModal({ //弹出提示
	// 				title: '系统提示', //提示的标题
	// 				content: '参数无效', //提示的内容
	// 				confirmText: '返回', //取消按钮的文字，默认为"取消"
	// 				showCancel: false, //是否显示取消按钮，默认为 true
	// 				success: (res) => {
	// 					if (res.confirm) { //监听弹窗返回按钮
	// 						uni.navigateBack(); //返回上一页
	// 					}
	// 				}
	// 			});
	// 		}
	// 	},
		onLoad(options) {
			this.title = (options.title || '') +'版权证书'
			this.fileUrl = options.url
			// console.log('连接'+this.fileUrl)
			this.pageInt(); //获取pdfs数据
		},
	
		mounted() {
			// #ifdef H5
			window.addEventListener("message", this.ReceiveMessage);
			// #endif
		},
	
		//页面销毁前
		beforeDestroy() {
			uni.removeStorage({ //清除pdf留下的缓存，不干扰新的pdf载入
				key: 'pdfjs.history',
				success() {
					// console.log("removeStorage", res)
				}
			})
		},
	
		methods: {
			//页面初始化
			pageInt() {
				// h5，使用h5访问的时候记得跨域
				// // #ifdef H5
				// 	this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
				// // #endif
				// // 在安卓和ios手机上
				// // 判断是手机系统：安卓，使用pdf.js
				// // #ifdef APP-PLUS
				// if(plus.os.name === 'Android') {
				// 	this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
				// }
				// // ios，直接访问pdf所在路径
				// else {
				// 	this.url = encodeURIComponent(this.fileUrl);
				// }
				// // #endif
				
				this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}`;
				
				// this.url = this.fileUrl;
				
				// window.open(this.url)
				// this.url = `${this.viewerUrl}?file=${encodeURIComponent(this.fileUrl)}&page=` + 5;
			},
			/* 
			 *	做成监听滚动条判断更好
			 * 
			 */
			//uni 组件通信 监听
			handlePostMessage(data) {
				let arr = data.detail.data.pop()
				this.totalPage = arr[0].totalPage //总页数
				this.currentReadPage = arr[1].page + 1 //当前页数
				console.log("app:", this.totalPage, this.currentReadPage);
			},
			//h5 监听
			ReceiveMessage(event) {
				if (event.data && event.data.data && event.data.data.arg) {
					this.totalPage = event.data.data.arg[0].totalPage
					this.currentReadPage = event.data.data.arg[1].page + 1
				}
				// console.log("app:", this.totalPage, this.currentReadPage);
			},
	
			//页面销毁前动作
			addBrowseRecord() {
				// console.log("总页数：",this.totalPage);
				// console.log("当前页数：",this.currentReadPage);
			},
		}
	}
</script>

<style lang="scss">
 /deep/ uni-web-view.uni-webview--fullscreen {
	position: absolute;
	left: 0;
	right: 0;
	top: 50px;
	bottom: 0;
 }
 .web-container{
	margin-top: 44px; 
 }
</style>